<template>
  <div class="city-group">
    <van-index-bar :sticky="false" :index-list="indexList">
      <van-index-anchor index="热门" />
      <div class="hot-list">
        <template v-for="hot in currentGroup.hotCities" :key="hot.cityId">
          <div class="hot-city" @click="cityClick(hot)">{{hot.cityName}}</div>
        </template>
      </div>

      <template v-for="group in currentGroup.cities" :key="group.group">
        <van-index-anchor :index="group.group" />
        <template v-for="city in group.cities" :key="city.cityId">
          <van-cell :title="city.cityName" @click="cityClick(city)" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script setup>
import { computed } from "vue"
import { useRouter } from 'vue-router'

import useCityStore from '@/stores/modules/city.js'

// 定义props
const props = defineProps({
  currentGroup: {
    type: Object,
    default: () => ({}),
  },
});

// 动态的获取索引
const indexList = computed(() => {
  const indexs = props.currentGroup.cities.map(item => item.group)
  indexs.unshift("#")
  return indexs
})

//点击对应城市的回显
const router = useRouter()
const cityStore = useCityStore()
const cityClick = (city) => {
  cityStore.currentCity = city
  router.back()
}
</script>

<style lang="less" scoped>
  .hot-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 10px;
    padding-right: 20px;

    .hot-city {
      width: 70px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background-color: #fff4ec;
      font-size: 12px;
      border-radius: 14px;
      margin: 6px;
    }
  }
</style>
